<template>
  <div class="home">
    <!-- 左半部分 -->
    <div class="leftbody">
      <!-- 欢迎图片 -->
      <div class="MyPicture m2b">
        <div>
          <el-card class="box-card">
            <template #header>
              <div class="card-header Mytitle">
                <span>欢迎使用自由编程协会开源社区</span>
              </div>
            </template>
            <div>
              <el-carousel indicator-position="outside" height="475px">
                <el-carousel-item v-for="item in images" :key="item">
                  <img :src="item" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </div>
      </div>
      <!-- 公告 -->
      <div>
        <el-card class="box-card m2b">
          <template #header>
            <div>
              <span class="font1">公告</span>
              <el-button type="primary" style="position: relative; float:right;" @click="reload">刷新</el-button>
            </div>
          </template>

          <div class="Announcement">
            <p style="font-style: oblique">出售题库，支持一键导入，需要联系qq：2193179165</p>
            <p>2022-09-15 15:32:39 hhm</p>
          </div>
        </el-card>
      </div>
      <!-- 其他OJ的近期比赛 -->
      <div>
        <el-card class="box-card">
          <template #header>
            <div>
              <span class="font1">其他OJ的近期比赛</span>
            </div>
          </template>
          <el-table :data="CompetitionData" style="width: 100%">
            <el-table-column prop="Competition" label="近期比赛" width="340" />
            <el-table-column prop="date" label="比赛时间" />
          </el-table>
        </el-card>
      </div>
    </div>

    <!-- 右半部分 -->
    <div class="rightbody">
      <!-- 近期比赛 -->
      <el-card class="box-card m2b">
        <template #header>
          <div>
            <span class="font1">近期比赛</span>
          </div>
        </template>

        <el-card class="contest-card">
          <template #header>
            <span class="Mytitle2">
              <a href="#" class="font2">CSP复赛2-模拟</a>
              <el-button type="success" class="button1">进行中</el-button>
            </span>
          </template>

          <el-row>
            <el-button type="warning" size="small" round>Info</el-button>
            <el-button plain size="small">私有赛</el-button>
          </el-row>

          <el-row>
            <el-button type="primary" size="small" round>09-17 17:24</el-button>
            <el-button type="success" size="small" round>12.3天</el-button>
            <el-button size="small" round>x5</el-button>
          </el-row>
        </el-card>

        <el-card class="contest-card">
          <template #header>
            <span class="Mytitle2">
              <a href="#" class="font2">CSP复赛2-模拟</a>
              <el-button type="success" class="button1">进行中</el-button>
            </span>
          </template>

          <el-row>
            <el-button type="warning" size="small" round>Info</el-button>
            <el-button size="small" plain>私有赛</el-button>
          </el-row>

          <el-row>
            <el-button type="primary" size="small" round>09-17 17:24</el-button>
            <el-button type="success" size="small" round>12.3天</el-button>
            <el-button size="small" round>x5</el-button>
          </el-row>
        </el-card>
      </el-card>

      <!-- 最近一周过题榜单 -->
      <el-card class="box-card m2b">
        <template #header>
          <div>
            <span class="font1">最近一周过题榜单</span>
          </div>
        </template>

        <el-table :data="RankData" style="width: 100%">
          <el-table-column prop="Rank" label="#" width="180" />
          <el-table-column prop="name" label="用户名" width="180" />
          <el-table-column prop="count" label="通过" />
        </el-table>
      </el-card>

      <el-card class="box-card m2b">
        <template #header>
          <div>
            <span class="font1">支持的远程评测平台</span>
          </div>
        </template>

        <div>
          <el-row gutter="20">
            <el-col :span="8"><el-image class="logo" :src="url" fit="fill" /></el-col>
            <el-col :span="8"><el-image class="logo" :src="url" fit="fill" /></el-col>
            <el-col :span="8"><el-image class="logo" :src="url" fit="fill" /></el-col>
          </el-row>

          <el-row gutter="20">
            <el-col :span="8"><el-image class="logo" :src="url" fit="fill" /></el-col>
            <el-col :span="8"><el-image class="logo" :src="url" fit="fill" /></el-col>
            <el-col :span="8"><el-image class="logo" :src="url" fit="fill" /></el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <el-row :gutter="20">
      <el-col :span="6">
        <h1>服务</h1>
        <div class="flex-co">
          <span style="line-height: 35px">开源社区</span>
        </div>
      </el-col>

      <el-col :span="6">
        <h1>服务</h1>
        <div class="flex-co">
          <a href="#">评测队列</a>
          <a href="#">系统信息</a>
        </div>
      </el-col>

      <el-col :span="6">
        <h1>开发</h1>
        <div class="flex-co">
          <a href="#">开源</a>
          <a href="#">API</a>
        </div>
      </el-col>

      <el-col :span="6">
        <h1>支持</h1>
        <div class="flex-co">
          <a href="#">关于</a>
          <a href="#">帮助</a>
        </div>
      </el-col>
    </el-row>

    <p style="position: relative; top: 30px">Powered by <a href="https://www.freeprogramming.cn">自由编程协会</a></p>
  </div>
</template>

<script setup>
const images = ['welcome.jpg']

const reload = () => {
  location.reload()
}

const CompetitionData = [
  {
    Competition: '[NowCoder] 牛客练习赛103',
    date: '2022-09-23 19:00:00 ~ 2022-09-23 21:30:00'
  },
  {
    Competition: '[NowCoder] 牛客练习赛103',
    date: '2022-09-23 19:00:00 ~ 2022-09-23 21:30:00'
  },
  {
    Competition: '[NowCoder] 牛客练习赛103',
    date: '2022-09-23 19:00:00 ~ 2022-09-23 21:30:00'
  },
  {
    Competition: '[NowCoder] 牛客练习赛103',
    date: '2022-09-23 19:00:00 ~ 2022-09-23 21:30:00'
  }
]

const RankData = [
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  },
  {
    Rank: '1',
    name: 'zhiyuan',
    count: '6'
  }
]

const url = ['hdu-logo.png']
</script>

<style scoped>
.m2b {
  margin-bottom: 20px;
}

.flex-co {
  display: flex;
  flex-direction: column;
}

.flex-co a {
  margin-top: 10px;
}

.home {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 1.5rem;
}

.leftbody {
  width: 60%;
}

.rightbody {
  width: 35%;
  margin-left: 40px;
}

.footer {
  margin-top: 2rem;
  color: #555 !important;
  background-color: #fff;
  text-align: center;
  padding: 3rem 2.5rem;
  width: 100%;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  position: relative;
  top: 50px;
}

.footer h1 {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-weight: 300;
  color: #3d3d3d;
  line-height: 1.1;
  font-size: 1.5rem;
  margin: 0.4em 0;
}

.Announcement {
  border: 1px solid hsla(0, 0%, 73.3%, 0.5);
  border-left: 2px solid #409eff;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  line-height: 2em;
  padding: 5px 0;
}

.font1 {
  color: #409eff;
  font-family: Raleway;
  font-size: 21px;
  font-weight: 500;
  padding-top: 10px;
  padding-bottom: 20px;
  line-height: 30px;
}

.font2 {
  color: #5eb95e;
  font-size: 1.15rem;
  font-weight: 600;
}

a:hover,
.font2:hover {
  color: #2196f3 !important;
}

.button1 {
  float: right;
}

.Mytitle {
  color: #409eff;
  font-weight: 600;
  font-size: 25px;
  font-family: Raleway;
  display: flex;
  justify-content: center !important;
}

.logo {
  border: 1px solid #409eff;
  border-radius: 4px;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: #fff;
  min-height: 47px;
}

.contest-card {
  border: 1px solid #19be6b;
  margin-bottom: 25px;
}

.contest-card :deep(.el-card__header) {
  border-bottom: 1px solid #19be6b !important;
  background-color: rgba(94, 185, 94, 0.15);
  border-radius: 4px;
}

.el-card :deep(.el-card__header) {
  padding: 0.6rem 1.25rem !important;
  border-bottom: 1px solid var(--el-card-border-color);
}

:deep(.el-row) {
  justify-content: center;
  margin-bottom: 5px;
}

.el-table :deep(.cell) {
  margin-left: 50px;
}

.el-table :deep(text) {
  margin-left: 50px;
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.leftbody .box-card {
  width: 100%;
}

.rightbody .box-card {
  width: 100%;
}
</style>
